<template>
  <div class="brokerage">
    <view class="brokerage-title">
      <text>我的佣金(元)</text>
      <view>{{ CommInfo.prices }}</view>
    </view>
    <view class="brokerage-content">
      <view class="brokerage-content-left">
        <text class="top">分销等级-VIP级</text>
        <view>返佣<text>{{ CommInfo.proportion }}</text>%</view>
      </view>
      <view class="brokerage-content-left">
        <text class="top">邀请用户数</text>
        <view>{{ CommInfo.peopCount }}人</view>
      </view>
    </view>
    <image :src="codeimg" mode="widthFix" />
    <view class="but" @click="getDownImg">下载</view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow, onReady } from "@dcloudio/uni-app"
import { GetCommInfo, GetWxaCode, UploadImagetep } from "@/api/user";
const CommInfo = ref<any>({})
const codeimg = ref<any>('')
onLoad(async () => {
  getinfo()
  getcode()
})
const getinfo = async () => {
  const res: any = await GetCommInfo()
  if (res.code === 0) {
    CommInfo.value = res.data
  }
}
const getcode = async () => {
  const res: any = await GetWxaCode()
  if (res.code === 0) {
    codeimg.value = 'data:image/png;base64,' + res.data
  }
}
const getDownImg = async () => {
  let res: any = await UploadImagetep({
    img: codeimg.value
  })
  if (res.code == 0) {
    let ImageUrl = res.data.imgurl
    uni.showLoading({
      title: '下载中'
    });
    uni.downloadFile({
      url: ImageUrl, //仅为示例，并非真实的资源
      success: (res) => {
        if (res.statusCode === 200) {
          uni.hideLoading()
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(data) {
              uni.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            },
            async fail(err) {

              if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                uni.showToast({
                  title: '请允许访问相册后重试',
                  icon: 'none',
                  duration: 1000
                });
                uni.showModal({
                  title: '提示',
                  content: '打开相册权限才可以保存哦',
                  cancelText: '取消',
                  confirmText: '打开权限',
                  success: async function (res) {
                    if (res.confirm) {
                    } else if (res.cancel) {
                    }
                  }
                });
              }
            },
            complete(res) {
              console.log('complete');
            }
          })
        }
      }
    })
  }

}
</script>

<style lang="scss" scoped>
page {
  background: #F7F7F7;
}

.brokerage {
  width: calc(100% - 64rpx);
  margin: 30rpx auto 0;

  .but {
    position: fixed;
    bottom: 120rpx;
    left: 32rpx;
    width: calc(100% - 64rpx);
    height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    background: linear-gradient(45deg, #fffacd, #ffdd99, #ffcce6);
    border-radius: 45rpx;
    line-height: 90rpx;
  }

  &-title {
    width: 100%;
    height: 180rpx;
    background: #f5f5f5;
    border-radius: 16rpx;

    text {
      font-size: 32rpx;
      color: #222;
      display: block;
      padding-top: 20rpx;
      margin-left: 30rpx;
    }

    view {
      font-size: 50rpx;
      margin-left: 30rpx;
      margin-top: 25rpx;
    }
  }

  &-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;

    &-left {
      width: calc(50% - 10rpx);
      height: 180rpx;
      background: #f5f5f5;
      border-radius: 16rpx;

      .top {
        font-size: 32rpx;
        color: #222;
        display: block;
        padding-top: 20rpx;
        margin-left: 30rpx;
      }

      view {
        font-size: 42rpx;
        margin-left: 30rpx;
        margin-top: 25rpx;

        text {
          font-size: 50rpx;
          color: red;
          margin: 0 10rpx;
          font-weight: 600;
        }
      }
    }
  }

  image {
    width: 75vw;
    margin: auto;
    display: block;
    margin-top: 50rpx;
  }
}
</style>